<template>
  <div id="GroupBuying">
    <app-header :name="name"></app-header>
    <div id="content">
      <div class="herder">
        <div class="search">
          <router-link to="/Search">大家都在搜</router-link>
          <img :src="data.headerIco">
        </div>
        <div class="nav">
          <ul>
            <li v-for="(item, index) in data.headerNav" :key="index" @click="active(index)" :class="{active:actives==index}">
              <router-link to="">{{item.className}}</router-link>
            </li>
          </ul>
          <div v-if="actives==0">
            <swiper :swiper_list="data.GB_HeaderSwiper"></swiper>
          </div>
        </div>
      </div>
      <div class="nav">
        <commodityList :list="data.GB_Nav" :NavClass="'NavClass'"></commodityList>
      </div>
      <div class="cont_bipin">
        <div class="bipin_hd">
          <div class="bipin_hd_left">
            <div class="title">今日<span>必拼</span></div>
            <div class="countdwon">
              <span>限时抢</span><span>倒计时</span>
            </div>
          </div>
          <div class="more">更多 ></div>
        </div>
        <div class="swiper">
          <bp-swiper :bpswiper="data.bpSwiper"></bp-swiper>
        </div>
      </div>
    </div>
    <app-footer :name="name"></app-footer>
  </div>
</template>

<script>
import Header from '@/components/Common/Header'
import swiper from '@/components/GroupBuying/swiper'
import commodityList from '@/components/Common/CommodityList'
import bpswiper from '@/components/GroupBuying/bp_swiper'
import Footer from '@/components/Common/Footer'
export default {
  name: 'GroupBuying',
  components: {
    'app-header': Header,
    'app-footer': Footer,
    swiper,
    commodityList,
    'bp-swiper': bpswiper
  },
  data () {
    return {
      name: '惊喜',
      data: '',
      actives: '',
      GB_HeaderSwiper: [
        { 'img': '../../static/image/groupbuying/swiper/1.jpg' },
        { 'img': '../../static/image/groupbuying/swiper/2.jpg' },
        { 'img': '../../static/image/groupbuying/swiper/3.jpg' },
        { 'img': '../../static/image/groupbuying/swiper/4.jpg' },
        { 'img': '../../static/image/groupbuying/swiper/5.jpg' },
        { 'img': '../../static/image/groupbuying/swiper/6.jpg' }
      ]
    }
  },
  mounted () {
    this.getdata()
  },
  methods: {
    getdata () {
      this.axios.get('../../static/json/GroupBuying.json').then(item => {
        this.data = item.data.data
      })
    },
    active (index) {
      this.actives = index
    }
  }
}
</script>

<style scoped lang="less">
#GroupBuying {
  background: rgba(255, 255, 255, 1);
  font-size: 24px; /*px*/
  #content {
    .herder {
      background: url("../../static/image/bg/bg-red.jpg") no-repeat;
      .search {
        height: 110px;
        padding: 30px 0 20px 0;
        display: flex;
        justify-content: space-around;
        a {
          width: 90%;
          background: rgba(255, 255, 255, 1);
          border-radius: 30px;
          line-height: 60px;
          padding: 0 0 0 30px;
          font-size: 28px;
          color: rgba(155, 155, 155, 1);
        }
        img {
          width: 50px;
          vertical-align: middle;
        }
      }
      .nav {
        position: relative;
        ul {
          display: flex;
          overflow-x: auto;
          margin: 0 0 0 14.5%;
          li {
            min-width: 14.5%;
            text-align: center;
            height: 70px;
            line-height: 70px;
            padding: 0 0 10px 0;
            a {
              width: 100%;
              color: rgba(255, 255, 255, 1);
            }
          }
          li:first-child {
            font-size: 32px; /*px*/
            position: absolute;
            left: 0;
          }
        }
      }
    }
    .bipin_hd {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      .bipin_hd_left {
        display: flex;
        .title {
          font-size: 36px; /*px*/
          font-weight: 700;
          margin: 0 20px 0 0;
          span:nth-of-type(1) {
            color: rgba(255, 0, 0, 1);
          }
        }
        .countdwon {
          span {
            padding: 5px 10px;
          }
          span:first-child {
            border: 1px solid rgba(255, 0, 0, 1);
            border-radius: 10px 0 0 0;
          }
          span:last-child {
            background: rgba(255, 0, 0, 1);
            color: rgba(255, 255, 255, 1);
            border-radius: 0 27px 27px 0;
          }
        }
      }
      .more {
        color: rgba(155, 155, 155, 1);
      }
    }
  }
}
.active {
  border-bottom: 5px solid rgba(255, 255, 255, 1);
}
</style>
